<template>
  <div class = "footer">
    <!--播放器内核-->
    <audio
        ref = "audio"
        src = "https://static.xfanread.com/annualReview/annualReview2019.mp3"
    ></audio>
    <!--播放器样式-->
    <div class = "audio">
      <div class = " song-info-container">

        <!--歌曲信息-->
        <transition name = "song-info">
          <div v-show = "!showAudioMask" class = "song-info">
            <!--歌曲专辑图片-->
            <el-avatar @click = "store.commit('UserInterface/SWITCHSHOWAUDIOMASK')" shape = "square" :size = "50"
                       :src = "logo" />
            <div class = "name-and-author">
              <!--歌曲名和红心-->
              <span>
            123
            <base-like />
          </span>
              <!--歌手名-->
              <span>321</span>
            </div>
          </div>
        </transition>

        <transition name = "mask-layer-test">
          <div v-show = "showAudioMask" class = "row-container al-center mask-layer-test-container">
            <i-down style = "padding-right:10px " @click = "store.commit('UserInterface/SWITCHSHOWAUDIOMASK')"
                    theme = "two-tone" size = "25"
                    :fill = "['#313131' ,'#fff']" />

            <div class = "row-container al-center" style = "margin-left: 30px">
              <div class = "mask-layer-test">
                <base-like />
              </div>
              <div class = "mask-layer-test">
                <base-like />
              </div>
              <div class = "mask-layer-test">
                <base-like />
              </div>
            </div>

          </div>
        </transition>
      </div>

      <!--歌曲操作-->
      <div class = "audio-main">
        <!--暂停播放下一首-->
        <div class = "operate">
          <div class = "operate-content">
            <i-arrow-left theme = "two-tone" size = "17" :fill = "['#313131' ,'#313131']" />
            <div class = "start-audio" @click = "isPause=!isPause ">
              <i-play-one v-if = "isPause" theme = "two-tone" size = "20" :fill = "['#313131' ,'#313131']" />
              <i-pause v-else theme = "two-tone" size = "20" :fill = "['#313131' ,'#313131']" />
            </div>
            <i-arrow-right theme = "two-tone" size = "17" :fill = "['#313131' ,'#313131']" />
            <span>词</span>
          </div>
        </div>
        <!--进度条-->
        <div class = "progress"
             :class = "[showCircle ? 'show' : 'not-show']"
             @mouseover = "showCircle = true"
             @mouseleave = "showCircle = false">

          <span>{{ nowProgress }}</span>
          <el-slider
              class = "progress-item"
              v-model = "nowProgress"
              :show-tooltip = "false"
              :show-input-controls = "false"
          />
          <span>{{ totalProgress }}</span>
        </div>
      </div>
      <!--音量设置，播放列表-->
      <div class = "audio-setting">
        <!--音质-->
        <div class = "level">
          <el-popover
              popper-class = "my-popover"
              placement = "top"
              width = "200px"
              trigger = "hover"
          >
            <template #reference>
              <el-tag>123</el-tag>
            </template>

            <ul class = "column-container" style = "width: 100%">
              <li class = "row-container  level-li">
                <i-check theme = "filled" size = "17" fill = "#FF8383" :strokeWidth = "3" strokeLinejoin = "miter" />
                <span style = "width: 100%"> <el-tag color = "var(--main-color-background)">VIP</el-tag> 123</span>
              </li>
              <li class = "row-container  level-li">
                <i-check theme = "filled" size = "17" fill = "#FF8383" :strokeWidth = "3" strokeLinejoin = "miter" />
                <span style = "width: 100%"> <el-tag color = "var(--main-color-background)">VIP</el-tag> 123</span>
              </li>
              <li class = "row-container  level-li">
                <i-check theme = "filled" size = "17" fill = "#FF8383" :strokeWidth = "3" strokeLinejoin = "miter" />
                <span style = "width: 100%"> <el-tag color = "var(--main-color-background)">VIP</el-tag> 123</span>
              </li>
              <li class = "row-container  level-li">
                <i-check theme = "filled" size = "17" fill = "#FF8383" :strokeWidth = "3" strokeLinejoin = "miter" />
                <span style = "width: 100%"> <el-tag color = "var(--main-color-background)">VIP</el-tag> 123</span>
              </li>
            </ul>

          </el-popover>
        </div>
        <!--音量-->
        <div class = "volume">
          <el-popover
              popper-class = "my-popover"
              placement = "top"
              width = "60px"
              trigger = "hover"
          >
            <template #reference>
              <i-volume-up v-if = "voice" theme = "two-tone" size = "20" :fill = "['#313131' ,'#fff']" />
              <i-volume-mute v-else theme = "two-tone" size = "20" :fill = "['#313131' ,'#fff']" />
            </template>

            <el-slider :show-tooltip = "false" v-model = "voice" vertical height = "100px" />

          </el-popover>
        </div>
        <i-music-list
            theme = "two-tone"
            size = "20"
            :fill = "['#313131' ,'#fff']"
            @click = "store.commit('UserInterface/SWITCHPLAYDRAWER')"
        />
      </div>
    </div>

  </div>

</template>

<script setup>
import BaseLike from "./Base/BaseLike";

import {computed, ref} from "vue";
import logo from '@/assets/logo.png'
import store from "@/store";

//播放器DOM
const audio = ref()
//遮罩层是否已经显示
let showAudioMask = computed(() => store.state.UserInterface.showAudioMask)
//*************************
//播放图标切换
let isPause = ref(true)
//进度条进度
let showCircle = ref(false)
let nowProgress = ref(5)
let totalProgress = ref("03:10")
//*************************
//音量
let voice = ref(50)

// function startPlay() {
//   audio.value.play()
// }
</script>

<style lang = "less" scoped>
.footer {
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 5px 15px;
  border-top: 1px solid #E0E0E0;

  .audio {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: space-between;

    .song-info-container {
      width: 220px;

      .mask-layer-test-container {
        position: absolute;
        top: 0;

        .mask-layer-test {
          border-radius: 50%;
          border: 1px solid #efefef;
          padding: 10px;
          margin-right: 10px;

          &:hover {
            background-color: #dcdbdb;
          }
        }
      }

      .song-info {
        position: absolute;
        top: 0;
        display: flex;

        .name-and-author {
          padding: 5px 5px;
          display: flex;
          flex-direction: column;

          span:nth-child(1) {
            font-size: 18px;
          }

          span:nth-child(2) {
            font-size: 14px;
          }
        }

      }
    }

    .audio-main {
      width: 40%;

      .operate {
        width: 100%;

        .operate-content {
          display: flex;
          height: 50%;
          justify-content: center;
          align-items: center;

          > * {
            padding: 0 25px;
          }
        }

        .start-audio {
          display: flex;
          padding: 5px;
          background-color: #F5F5F5;
          border: 1px solid #F5F5F5;
          border-radius: 50%;
        }
      }

      .progress {
        display: flex;
        align-items: center;
        height: 50%;

        > span {
          padding: 0 5px;
          display: inline-block;
          font-size: 7px;
        }

        .progress-item {
          height: 4px;
        }

      }

    }

    .audio-setting {
      display: flex;

      .volume {

        .slider-demo-block {
          width: 40px;
        }


      }

      > * {
        padding-left: 20px;
      }
    }


  }

  //  专辑信息动画
  .song-info-enter-active,
  .song-info-leave-active {
    transition: all 0.5s ease;
  }

  .song-info-enter-from,
  .song-info-leave-to {
    transform: translateY(50px);
  }

  .mask-layer-test-enter-active,
  .mask-layer-test-leave-active {
    transition: all 0.5s ease;
  }

  .mask-layer-test-enter-from,
  .mask-layer-test-leave-to {
    transform: translateY(-50px);
  }

}

// 滑块样式 高度设置按钮
:deep(.el-slider__runway) {
  height: 4px;
  cursor: default;
}

:deep(.el-slider__bar) {
  background-color: var(--slider-button-color);
  height: 4px;
}

:deep(.el-slider__button, .el-slider__button-wrapper) {
  width: 10px;
  height: 10px;
  border: 1px solid black;
}

.show :deep(.el-slider__button-wrapper) {
  display: block;
}

.not-show :deep(.el-slider__button-wrapper) {
  display: none;
}

:deep(.el-slider__button-wrapper.hover,.el-slider__runway ) {
  cursor: default;
}

:deep(.el-slider__button.hover, .el-slider__button:hover ) {
  cursor: default;
}

//
.level-li {
  width: 100%;

  span:first-child {
    margin: 0 10px;
  }
}

</style>
